<template>
    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">

                    <div class="card-toolbar clearfix">
                        <form class="form-inline" onsubmit="return false;">
                            <div class="form-group">
                                <el-select v-model="categoryId" placeholder="全部">
                                    <el-option
                                            v-for="item in selectOptions"
                                            :key="item.value"
                                            :label="item.value"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-success" type="submit" v-on:click="addHotIndustryId()">添加</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-body" v-loading="loading">
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    @sort-change='sortChange'
                                    :default-sort="{prop: '_id', order: 'descending'}"
                            >
                                <el-table-column
                                        prop="name"
                                        label="分类名称"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="isFollow"
                                        label="是否为默认关注"
                                        width="180">
                                    <template slot-scope="scope">
                                        <a @click="handleStatus(scope.row._id,0)" style="cursor:pointer;" v-if="scope.row.isFollow===1">是</a>
                                        <a @click="handleStatus(scope.row._id,1)" style="cursor:pointer;" v-if="!scope.row.isFollow">否</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="sort"
                                        label="排序"
                                        align="center"
                                        width="220">
                                    <template slot-scope="scope">
                                        <el-input-number v-model="scope.row.sort" @change="handleChange(scope.row.sort,scope.row._id)" :min="0" :max="100" label="排序"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <span class="span-success" @click="handleEdit(scope.row._id,0)">取消推荐</span>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HotCategoryComponent",
        data() {
            return {
                pageActive: true,
                list: [],
                pageSize: 100,
                total: 0,
                num:1,
                currentPage: 1,
                loading: true,
                selectOptions:[],
                categoryId:'',
                categoryIds:[],
                orderField:'sort',
                order:'asc',
            }
        },
        methods: {
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            sortChange(item) {
                let order = "asc";
                this.orderField = item.prop;
                console.log(item);
                if (item.order === 'descending') {
                    order = "desc";
                }
                this.order = order;
                this.search();
            },
            search: function () {
                let self = this;
                let uri = 'setting/hot/post-category';
                self.loading = true;

                let postData = {
                    page: self.currentPage,
                    limit: self.pageSize,
                    orderField:self.orderField,
                    order:self.order
                };

                axios.post(uri,postData).then(function (result) {
                    self.total = result.industries.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    let list = result.industries.data;
                    self.list = list;
                    self.categoryIds = [];
                    list.forEach((item) => {
                        self.categoryIds.push(item._id)
                    });
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            getIndustry:function (keyword = '') {
                let self = this;
                let uri = 'category/search/'+keyword;
                axios.get(uri).then(function (result) {
                    self.selectOptions = result.list;
                    self.loading = false;
                });
            },
            addHotIndustryId:function () {
                let self = this;
                if (this.categoryId && this.categoryIds.indexOf(this.categoryId) == -1) {
                    this.categoryIds.push(this.categoryId);
                } else {
                    self.$message.error("已经添加过该分类了");
                    return;
                }
                let uri = "category/setStatus/" + this.categoryId + "?status=1";
                axios.get(uri).then(function (result) {
                    self.search();
                });
            },
            handleEdit(id, status) {
                let self = this;
                let uri = "category/setStatus/" + id + "?status=" + status;
                axios.get(uri).then(function (result) {
                    self.search();
                });
            },//查询分类
            handleStatus:function (id,status) {
                let self = this;
                let uri = "setting/hot/set-status/"+id+"/"+status;

                axios.get(uri).then(function (result) {
                    self.search();
                });
            },
            handleChange(sort,id){
                let self = this;
                let uri = "setting/hot/set-sort/"+id+"/"+sort;
                axios.get(uri).then(function (result) {
                    self.search();
                });
            }

        },
        created() {
            this.search();
        },
        mounted() {
            this.getIndustry();
        }
    }
</script>

<style scoped>

</style>
